<body>
  <div class="container">
    <button class="btn">stop</button>
    <div class="animation"></div>
  </div>
</body>




<script>
  document.querySelector('.btn').addEventListener('click', function () {
    let btn = document.querySelector('.btn')
    let elem = document.querySelector('.animation')
    let state = elem.style['animationPlayState']

    if (state === "paused") {
      elem.style['animationPlayState'] = "running"
      btn.innerHTML = "stop"
    } else {
      elem.style['animationPlayState'] = "paused"
      btn.innerHTML = "play"
    }
  })
</script>

<style>
  .container {
    position: relative;
    top: 50%;
    left: 50%;
  }

  .btn {
    position: absolute;
    top: -200px
  }

  .animation {
    animation: move 2s linear infinite alternate;
    width: 100px;
    height: 100px;
    background: pink;
  }

  @keyframes move {
    0% {
      transform: translate(-100px, 0);
    }

    100% {
      transform: translate(100px, 0);
    }
  }
</style>